<template>
  <s-layout title="学员">

    <view class="cart-box ss-flex ss-flex-col ss-row-between">
      <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
        <view class="header-left ss-flex ss-col-center ss-font-26">
          共
          <text class="goods-number ui-TC-Main ss-flex">{{ state.list.length }}</text>
          位学员
        </view>
        <view class="header-right">
          <button v-if="state.editMode" class="ss-reset-button" @tap="state.editMode = false">
            取消
          </button>
          <button v-else class="ss-reset-button ui-TC-Main" @tap="state.editMode = true">
            删除
          </button>
        </view>
      </view>
      <s-empty v-if="state.list.length === 0 && noData" text="学员空空如也,快去添加吧~" icon="cart-empty.png" />
      <view v-else class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
        <view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
          <view class="ss-flex ss-col-center">
            <label v-if="state.editMode == true" class="check-box ss-flex ss-col-center ss-p-l-10" style="width:50rpx"
              @tap="onSelectSingle(item.id)">
              <radio :checked="state.selectedIds.includes(item.id)" color="var(--ui-BG-Main)"
                style="transform: scale(0.8)" @tap.stop="onSelectSingle(item.id)" />
            </label>
            <label v-else class="check-box ss-flex ss-col-center ss-p-l-10" style="width:50rpx">
            </label>
            <l-student-item :name="item.name" :img="item.avatar" :sex="item.sex == 2 ? '女' : '男'" :age="item.age"
              :idCard="item.idCard" priceColor="#FF3000" :titleWidth="400"
              @tap.stop="state.editMode ? onSelectSingle(item.id) : selStu(item)">
            </l-student-item>
          </view>
          <view class="ss-flex ss-row-right ss-p-b-20 ss-p-r-20">
            <view class="edit" @click="sheep.$router.go('/pages/student/add?id='+item.id)">编辑</view>
          </view>
        </view>
      </view>
      <su-fixed bottom placeholder :isInset="false">
        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom" v-if="state.editMode">
          <view class="footer-left ss-flex ss-col-center">
            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
              <radio :checked="state.isAllSelected" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
                @tap.stop="onSelectAll" />
              <view class="ss-m-l-8"> 全选 </view>
            </label>
            <!-- <view v-else>
              <image src="https://txz-1332973494.cos.ap-guangzhou.myqcloud.com/static/img/shop/student_add.png" mode=""
                style="width: 480rpx; height: 100rpx;" />
            </view> -->
          </view>
          <view class="footer-right">
            <button class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main" @tap="onDelete">
              删除学员
            </button>
            <!-- <button v-else class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
              @tap="sheep.$router.go('/pages/student/add')">
              添加学员
            </button> -->

          </view>
        </view>
        <view v-else class="footer-box ss-p-20">
          <button class="ss-rest-button logout-btn ui-Shadow-Main"
            @tap="sheep.$router.go('/pages/student/add')">添加学员</button>
        </view>
      </su-fixed>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import {
    onLoad,
    onShow,
    onPullDownRefresh
  } from '@dcloudio/uni-app';
  import {
    computed,
    ref,
    reactive
  } from 'vue';
  import StudentApi from '@/sheep/api/member/student';

  const sys_navBar = sheep.$platform.navbar;

  let noData = ref(false)

  const state = reactive({
    editMode: false,
    list: [],
    selectedList: [],
    selectedIds: [],
    isAllSelected: false,
    totalPriceSelected: computed(() => cart.totalPriceSelected),
  });
  const page = reactive({
    pageSize: 99,
    pageNo: 1
  });

  // 单选选中
  const onSelectSingle = (id) => {
    let index = state.selectedIds.indexOf(id)
    if (index != -1) {
      state.selectedIds.splice(index, 1);
    } else {
      state.selectedIds.push(id);
    }
    if (state.selectedIds.length > 0 && state.selectedIds.length == state.list.length) {
      state.isAllSelected = true
    } else {
      state.isAllSelected = false
    }
  }

  // 全选
  const onSelectAll = () => {
    state.isAllSelected = !state.isAllSelected;
    if (state.isAllSelected) {
      state.selectedIds = state.list.map(item => item.id)
    } else {
      state.selectedIds = []
    }
  }

  // 选择生生
  const selStu = (item) => {
    uni.$emit('selStuData', {
      stuName: item.name,
      stuId: item.id
    })
    sheep.$router.back()
  }

  const onNumberChange = (e, cartItem) => {
    if (e === 0) {
      cart.delete(cartItem.id);
      return;
    }
    if (cartItem.goods_num === e) return;
    cartItem.goods_num = e;
    cart.update({
      goods_id: cartItem.id,
      goods_num: e,
      goods_sku_price_id: cartItem.goods_sku_price_id,
    });
  }

  const onDelete = () => {
    if (state.selectedIds.length == 0) {
      uni.showToast({
        title: "请选择要删除的学员",
        icon: 'none'
      })
      return
    }
    let ids = state.selectedIds.join(',')
    StudentApi.deleteStudent(ids).then(res => {
      sheep.$router.go('/pages/index/student')
    })
  }

  const loadPage = () => {
    StudentApi.getStudentPage(page).then(res => {
      noData = true
      if (res.code == 0) {
        state.list = res.data.list
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg,
        })
      }

    })
  }

  onShow((options) => {
    loadPage()
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 800);
  });
</script>

<style lang="scss" scoped>
  :deep(.ui-fixed) {
    height: 72rpx;
  }

  .edit {
    text-align: center;
    height: 50rpx;
    color: #fff;
    width: 120rpx;
    line-height: 50rpx;
    border-radius: 0.9375rem;
    font-size: 0.875rem;
    background: linear-gradient(90deg, #ff3000, #ff300099);
  }

  .cart-box {
    width: 100%;

    .cart-header {
      height: 70rpx;
      background-color: #f6f6f6;
      width: 100%;
      position: fixed;
      left: 0;
      top: v-bind('sys_navBar') rpx;
      z-index: 1000;
      box-sizing: border-box;
    }

    .cart-footer {
      height: 100rpx;
      background-color: #fff;

      .pay-btn {
        width: 180rpx;
        height: 70rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-weight: 500;
        border-radius: 40rpx;
      }
    }

    .cart-content {
      margin-top: 70rpx;
      height: 1250rpx;
      overflow-y: scroll;
      position: fixed;

      .goods-box {
        background-color: #fff;
      }
    }
  }

  .buy-btn {
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-weight: 500;
    font-size: 28rpx;
    background: linear-gradient(90deg, #ff3000, #ff300099);
    color: #fff;
    text-align: center;
  }

  .logout-btn {
    width: 710rpx;
    height: 80rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: $white;
  }
</style>